@extends('admin.layout')

@section('title', '订单详情')
@section('page-title', '订单详情')

@section('content')
<div class="space-y-6" x-data="orderDetail()" x-init="init({{ $id }})">
    <!-- 返回按钮 -->
    <div class="flex items-center">
        <a href="{{ route('admin.orders.index') }}" class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700">
            <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            返回订单列表
        </a>
    </div>

    <!-- 订单基本信息 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">订单 #<span x-text="order.order_id"></span></h1>
                    <p class="text-sm text-gray-500" x-text="'创建时间: ' + formatDate(order.created_at)"></p>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium" 
                          :class="getStatusClass(order.status)" 
                          x-text="getStatusText(order.status)"></span>
                    <button x-show="order.status === 'pending'" 
                            @click="confirmOrder()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        确认订单
                    </button>
                    <button x-show="order.status === 'pending'" 
                            @click="cancelOrder()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        取消订单
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单详细信息 -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2" x-show="!loading">
        <!-- 用户信息 -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">用户信息</h3>
                <div class="flex items-center space-x-4">
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                            <span class="text-lg font-medium text-white" x-text="order.user ? order.user.nickname[0] : 'U'"></span>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-lg font-medium text-gray-900" x-text="order.user ? order.user.nickname : '未知用户'"></h4>
                        <p class="text-sm text-gray-500" x-text="order.user ? order.user.phone : '无手机号'"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 房间信息 -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">房间信息</h3>
                <div class="flex items-center space-x-4">
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-lg font-medium text-gray-900" x-text="order.room ? order.room.name : '未知房间'"></h4>
                        <p class="text-sm text-gray-500" x-text="'状态: ' + (order.room ? order.room.status : '未知')"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单菜品列表 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">订单菜品</h3>
            <div class="flow-root">
                <ul class="-mb-8" x-show="order.dishes && order.dishes.length > 0">
                    <template x-for="(dish, index) in order.dishes" :key="index">
                        <li>
                            <div class="relative pb-8">
                                <span x-show="index < order.dishes.length - 1" class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                                <div class="relative flex space-x-3">
                                    <div>
                                        <span class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center ring-8 ring-white">
                                            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                            </svg>
                                        </span>
                                    </div>
                                    <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                        <div>
                                            <p class="text-sm font-medium text-gray-900" x-text="dish.name"></p>
                                            <p class="text-sm text-gray-500" x-text="'数量: ' + dish.quantity + ' 份'"></p>
                                            <div x-show="dish.note" class="mt-1">
                                                <p class="text-xs text-gray-400" x-text="'备注: ' + dish.note"></p>
                                            </div>
                                            <div x-show="dish.flavor" class="mt-1">
                                                <p class="text-xs text-gray-400" x-text="'口味: ' + dish.flavor"></p>
                                            </div>
                                        </div>
                                        <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                            <p x-text="'ID: ' + dish.dish_id"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
                <div x-show="!order.dishes || order.dishes.length === 0" class="text-center py-4">
                    <p class="text-sm text-gray-500">该订单没有菜品信息</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单统计信息 -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3" x-show="!loading">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">菜品数量</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="order.dishes_count || 0"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">总数量</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="order.total_quantity || 0"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">订单ID</dt>
                            <dd class="text-lg font-medium text-gray-900" x-text="order.id || 'N/A'"></dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单其他信息 -->
    <div class="bg-white shadow rounded-lg" x-show="!loading">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">其他信息</h3>
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">支付状态</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="order.payment_status || '未设置'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">支付方式</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="order.payment_method || '未设置'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">支付时间</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="order.payment_time || '未支付'"></dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">最后更新</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="formatDate(order.updated_at)"></dd>
                </div>
                <div class="sm:col-span-2" x-show="order.notes">
                    <dt class="text-sm font-medium text-gray-500">备注</dt>
                    <dd class="mt-1 text-sm text-gray-900" x-text="order.notes"></dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- 加载状态 -->
    <div x-show="loading" class="text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="mt-2 text-sm text-gray-500">加载中...</p>
    </div>
</div>

<script>
function orderDetail() {
    return {
        order: {},
        loading: true,
        orderId: null,
        
        init(orderId) {
            this.orderId = orderId;
            this.loadOrderDetail();
        },
        
        async loadOrderDetail() {
            this.loading = true;
            try {
                const response = await fetch(`/admin/api/orders/${this.orderId}`);
                this.order = await response.json();
            } catch (error) {
                console.error('加载订单详情失败:', error);
            } finally {
                this.loading = false;
            }
        },
        
        async confirmOrder() {
            try {
                const response = await fetch(`/admin/api/orders/${this.order.id}/confirm`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                
                if (response.ok) {
                    this.order.status = 'confirmed';
                }
            } catch (error) {
                console.error('确认订单失败:', error);
            }
        },
        
        async cancelOrder() {
            try {
                const response = await fetch(`/admin/api/orders/${this.order.id}/cancel`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                
                if (response.ok) {
                    this.order.status = 'cancelled';
                }
            } catch (error) {
                console.error('取消订单失败:', error);
            }
        },
        
        formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        },
        
        getStatusClass(status) {
            const classes = {
                'pending': 'bg-yellow-100 text-yellow-800',
                'confirmed': 'bg-green-100 text-green-800',
                'cancelled': 'bg-red-100 text-red-800'
            };
            return classes[status] || 'bg-gray-100 text-gray-800';
        },
        
        getStatusText(status) {
            const texts = {
                'pending': '待确认',
                'confirmed': '已确认',
                'cancelled': '已取消'
            };
            return texts[status] || '未知状态';
        }
    }
}
</script>
@endsection
